<template>
  <div class="home">
    <div class="top">
      <div class="menu-icon">
        <img src="@/assets/icon/xiangqing.png" alt="菜单">
      </div>
      <div class="search-container">
        <Search />
      </div>
    </div>
    <Banner />
    <RecommendPlaylists />
    <HotSingers />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Banner from '@/components/home/Banner.vue'
import Search from '@/components/home/Search.vue'
import RecommendPlaylists from '@/components/home/RecommendPlaylists.vue'
import HotSingers from '@/components/home/HotSingers.vue'
</script>

<style lang="scss" scoped>
.home {
  padding: 15px;

  .top {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    
    .menu-icon {
      width: 24px;
      margin-right: 10px;
      
      img {
        width: 100%;
      }
    }
    
    .search-container {
      flex: 1;
    }
  }
}
</style>